<template>
        <div class="f-c-c h100 ">
            <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="账户名" prop="account">
          
          <el-input v-model="ruleForm.account" />
        </el-form-item>
        <el-form-item  label="密码" prop="password">
          
          <el-input v-model="ruleForm.password" />
        </el-form-item>

        <el-form-item  label="密码" prop="password">
          
          <el-select v-model="ruleForm.userGroup" placeholder="请选择角色">
                                        <el-option label="超级管理员" value="超级管理员" />
                                        <el-option label="普通管理员" value="普通管理员" />
                                </el-select>

        </el-form-item>
        
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="submitForm(ruleFormRef)">
            添加
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    
    
        </div>
    
    </template>
        
    <script setup lang='ts'>
            import { reactive, ref ,} from 'vue'
       
    import { FormInstance, FormRules,ElMessage } from 'element-plus'
   

    import {addAccountApi} from "../../apis/user.js"
 
    const formSize = ref('default')
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({
        account:"",
        password:"",
        userGroup: "普通管理员"
    })
    const loading=ref(false)
    
    const rules = reactive<FormRules>({
        account: [
        { required: true, message: '请输入正确的名字', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入正确的密码', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
      
    })
    
    const submitForm = async (formEl: FormInstance | undefined) => {
    
            loading.value=true
      if (!formEl) return
      await formEl.validate((valid:any, fields:any) => {
        if (valid) {
          console.log('submit!')
          addAccountApi(ruleForm)
          .then(()=>{
            loading.value=false
                ElMessage.success('添加成功')
                   
            
          })
          .catch(err => {
                        console.log("err", err);
                        loading.value = false;
                    })
        } else {
          console.log('error submit!', fields)
          loading.value=false
        }
      })
    }
    
    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.resetFields()
    }
    
    
    </script>
        
    <style>
        
    </style>